<template>
	<view>
		<!-- 轮播图 -->
		<view>
			<swiper :indicatorDots="true" :circular="true" class="swiper-dad">
				<swiper-item class="swiper-item" v-for="(item,index) in goodsDetail.imgs" @click="preImage(index)">
					<image class="swiper-images" :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 发布于 xxx -->
		<view class="the-time">
			<text>发布于{{ formattedReleaseTime }}</text>
		</view>
		<!-- 商品详情 -->
		<view class="goods-detail">
			<!-- 商品名称 -->
			<!-- <view class="goods-name">{{ goodsDetail.name }}</view> -->
			<!-- 商品价格 -->
			<view class="goods-price">￥{{ goodsDetail.price }}</view>
			<!-- 商品描述 -->
			<view class="goods-info">{{ goodsDetail.info }}</view>

			<!-- 卖家信息 -->
			<view class="seller-info">
				<view class="seller-info-right">
					<image class="seller-avatar" :src="seller.avatarUrl" mode="aspectFill"></image>
					<text class="seller-name">{{ seller.name }}</text>
				</view>
				<view class="seller-bt" @click="chatWithSeller">
					<text>和Ta聊聊</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//日期信息
				formattedReleaseTime: "",
				// 轮播图
				currentImage: 0, //当前展示的图片
				//商品信息
				goodsDetail: {
					goodsId: 0,
					imgs: [
						"/static/test/wql1.jpg"
						// "https://img2.baidu.com/it/u=1221805218,3055426471&fm=253&fmt=auto&app=138&f=JPEG?w=1080&h=450",
						// "https://bpic.588ku.com/element_origin_min_pic/19/11/27/be00d594880990401ca0e8d3b4459972.jpg",
						// "https://s21.ax1x.com/2024/04/29/pkFGg10.jpg",
						// "https://s21.ax1x.com/2024/04/29/pkFYYsf.jpg",
						// "https://img1.baidu.com/it/u=2147271989,3697379041&fm=253&fmt=auto&app=120&f=PNG?w=285&h=285"
					],
					// name: '桌子',
					info: '',
					price: "",
					releaseTime: "", //发布时间 2022-05-05T19:23:33
					sellerId: 0, //卖家 id
				},
				//卖家信息
				seller: {
					name: '名字最长有八个字',
					avatarUrl: 'https://photo.chaoxing.com/photo_80.jpg', //头像
					mail: '' //联系方式： 微信号好友截图
				},
				//和他聊聊
				chatUrl: ''
			}
		},
		methods: {
			//和他聊聊
			chatWithSeller(){
				const arr = [this.chatUrl]
				uni.previewImage({
					urls: arr
				})
			},
			
			//图片预览
			preImage(index) {
				// 设置当前预览图片的索引  
				this.currentImage = index;
				// 调用 uni.previewImage API 来预览图片  
				uni.previewImage({
					current: this.currentImage, // 当前显示图片的 http链接 下标
					urls: this.goodsDetail.imgs, // 需要预览的图片 http链接列表  
				});
			},
			//发布时间处理
			formatReleaseTime(releaseTime) {
				// 将发布时间字符串转换为 Date 对象
				const releaseDate = new Date(releaseTime);
				// 获取当前时间
				const currentDate = new Date();

				// 如果发布时间是今天
				if (
					releaseDate.getDate() === currentDate.getDate() &&
					releaseDate.getMonth() === currentDate.getMonth() &&
					releaseDate.getFullYear() === currentDate.getFullYear()
				) {
					return `今日${releaseDate.getHours()}时${releaseDate.getMinutes()}分`;
				}

				// 如果发布时间是昨天
				const yesterday = new Date(currentDate);
				yesterday.setDate(yesterday.getDate() - 1);
				if (
					releaseDate.getDate() === yesterday.getDate() &&
					releaseDate.getMonth() === yesterday.getMonth() &&
					releaseDate.getFullYear() === yesterday.getFullYear()
				) {
					return `昨日${releaseDate.getHours()}时${releaseDate.getMinutes()}分`;
				}

				// 如果发布时间是一年内
				if (currentDate.getFullYear() === releaseDate.getFullYear()) {
					return `${releaseDate.getMonth() + 1}月${releaseDate.getDate()}日${releaseDate.getHours()}时${releaseDate.getMinutes()}分`;
				}

				// 如果发布时间超过一年
				return `${releaseDate.getFullYear()}年${releaseDate.getMonth() + 1}月${releaseDate.getDate()}日${releaseDate.getHours()}时${releaseDate.getMinutes()}分`;
			}
		},
		async onLoad(option){ //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。String类型
			const app = getApp()
			//请求....
			const goods_result = await uni.request({
				url: app.globalData.api + "/home/goods",
				method: 'GET',
				data: {	
					id: option.id
				}
			});
			const rgd = goods_result.data.data.homeGoodsDetailFO
			const rsd = goods_result.data.data.ownUserInfoFO
			console.log('商品细节响应详情：')
			console.log(goods_result)
			//保存数据
			//1商品：
			this.goodsDetail.goodsId = option.id
			this.goodsDetail.imgs = rgd.imgs
			this.goodsDetail.info = rgd.info
			this.goodsDetail.price = rgd.price
			//发布时间转化器
			this.formattedReleaseTime = this.formatReleaseTime(rgd.time)
			this.goodsDetail.sellerId = rgd.sellerId
			//2卖家：
			this.seller = rsd
			//3.“ 和 Ta 聊聊 ”
			this.chatUrl = goods_result.data.data.chatUrl
		}
	}
</script>

<style>
	/* 轮播图 */
	.swiper-dad {
		height: 500rpx;
	}

	.swiper-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.swiper-images {
		width: 100%;
		height: 500rpx;
	}

	.the-time {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		padding: 10rpx;
		/* 上边距 */
		background-color: #f0f0f0;
		color: #707070;
		font-size: 32rpx;

	}


	.goods-detail {
		margin: 2rpx 10rpx;
		/* 上边距 */
	}



	.goods-info {
		color: #707070;
		font-size: 32rpx;
		margin: 10rpx auto;
	}

	.goods-price {
		font-size: 32rpx;
		/* 商品价格字体大小 */
		color: #a9161f;
		font-weight: bold;
		/* 商品价格字体颜色 */
		/* 商品价格与卖家信息之间的下边距 */
	}



	.seller-avatar {
		width: 80rpx;
		height: 80rpx;

		margin-right: 10rpx;
		/* 卖家头像与卖家名称之间的右边距 */
	}

	.seller-info {
		margin: 10rpx auto;
		display: flex;
		/* 卖家信息水平排列 */
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 让子元素分别向两侧靠拢 */
	}

	.seller-info-right {
		display: flex;
	}

	.seller-name {
		font-size: 32rpx;
		/* 卖家名称字体大小 */
		color: #707070;
		/* 卖家名称字体颜色 */
		margin-right: 10rpx;
		align-self: center;
		/* 自身垂直居中 */
	}

	.seller-bt {
		border-radius: 25px;
		padding: 12rpx;
		border-style: solid;
		border-color: #e8e8e8;
		color: #707070;
		display: flex;
		font-size: 32rpx;
		align-items: center;
		/* 垂直居中 */
	}
</style>